import {useEffect, useState} from "react";
import {Button, Form, Modal, Row, Table, message} from "antd";
import useCard from "@/hooks/useCard";
import useBoolean from "@/hooks/useBoolean";
import {ApiVersionDel, ApiVersionEditInfo, ApiVersionList} from "@/api";
import {InputFormItem, SelectFormItem} from "@/components/common/form/formItem";
import {PLATFORM, PLATFORMLIST, columnsIndex, columnsSetting} from "@/components/Columns";

export default function Verison() {
    const [form] = Form.useForm();
    const [visibly, on, off] = useBoolean(false);
    const [row, setRow] = useState<any>("");
    const [list, setList] = useState([]);
    const [onDel, onCreateOrEdit] = useCard({
        delApi: ApiVersionDel,
        createApi: ApiVersionEditInfo,
    });
    const initReq = () => {
        ApiVersionList()
            .then((result: any) => {
                setList(result.data);
            })
            .catch(err => {
                console.log(err);
            });
    };
    const handleOk = async () => {
        try {
            const val = await form.validateFields();
            let flag = false;
            list.forEach((item: any) => {
                if (item.appCode === val.appCode) {
                    flag = true;
                }
            });
            if (flag && !row) {
                message.error({duration: 5, content: "已拥有改平台"});
                onCancel();
                return;
            }
            const res = await onCreateOrEdit([val]);
            console.log(res);
            initReq();
            onCancel();
        } catch (error) {
            console.log(error);
        }
    };
    const handleEdit = (row: any) => {
        on();
        form.setFieldsValue(row);
        setRow(row);
    };

    const handleDel = (row: any) => {
        onDel([row.pkId], initReq);
    };
    const onCancel = () => {
        setRow("");
        off();
    };

    useEffect(() => {
        initReq();
    }, []);

    return (
        <div>
            <Row style={{marginBottom: 16}}>
                <Button type="primary" onClick={on}>
                    添加平台
                </Button>
            </Row>
            <Table
                pagination={false}
                dataSource={list}
                rowKey="pkId"
                columns={[
                    columnsIndex,
                    {
                        title: "平台",
                        dataIndex: "appCode",
                        key: "appCode",
                        render: (text: any) => PLATFORM[text],
                    },
                    {
                        title: "版本",
                        dataIndex: "approVersion",
                        key: "approVersion",
                    },
                    {
                        ...columnsSetting,
                        render: (_: any, row: any) => (
                            <div>
                                <Button type="primary" size="small" onClick={() => handleEdit(row)}>
                                    编辑
                                </Button>

                                <Button danger style={{marginLeft: 20}} onClick={() => handleDel(row)} size="small">
                                    删除
                                </Button>
                            </div>
                        ),
                    },
                ]}
            />
            <Modal
                destroyOnClose
                width={600}
                title={`${row ? "编辑" : "添加"}`}
                open={visibly}
                onOk={handleOk}
                onCancel={onCancel}
            >
                <Form form={form} labelAlign="left" labelCol={{span: 4}} preserve={false}>
                    <SelectFormItem required={!row} disabled={row} name="appCode" label="平台" options={PLATFORMLIST} />
                    <InputFormItem name="approVersion" label="版本" required={!row} placeholder="请输入版本" />
                    {row && <InputFormItem hidden={true} name="pkId" label="pkId" />}
                </Form>
            </Modal>
        </div>
    );
}
